<template>
	<view>
		<view class="dt">
			<view class="title">地址信息：</view>
			<view class="inputWrap">
				<view class="input">
					<view class="inputLeft">
						<view class="title">姓名</view>
						<input type="text" v-model="list.company.username" placeholder="请输入姓名" placeholder-class="pcs" />
					</view>
				</view>
				<view class="input">
					<view class="inputLeft">
						<view class="title">手机号码</view>
						<input type="number" v-model="list.company.tel" placeholder="请输入手机号码" placeholder-class="pcs" />
					</view>
				</view>
			
				<view class="input" @click="showMulLinkageThreePicker">
					<view class="inputLeft">
						<view class="title">收货地址</view>
						<view>
							<view class="pcs" v-if="!list.company.province_id">请选择地址</view>
							<view class="pickerInput" v-else>{{list.company.province_name}}-{{list.company.city_name}}-{{list.company.area_name}}</view>
						</view>
					</view>
				</view>
				<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker"
					:pickerValueDefault="cityPickerValueDefault" @onCancel="onCancel" @onConfirm="onConfirm">
				</mpvue-city-picker>
			
				<view class="uniFlex2">
					<view class="title">详细地址</view>
					<textarea type="text" v-model="list.company.address" placeholder="请输入详细地址" placeholder-class="pcs2"></textarea>
				</view>
			
			</view>
		</view>

		<view class="dt">
			<view class="title">支付信息：</view>
			<!-- <view class="navs uniBtn">
				<view class="name">取药方式：</view>
				<view class="info2">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="title">
						<view class="uniEnd">
							<view class="pcs" v-if="!arrayId1">请选择</view>
							<view v-else>{{arrayName1}}</view>
							<img src="../../static/bg/icons.png" alt="">
						</view>
					</picker>
				</view>
			</view>
			<view class="navs uniBtn">
				<view class="name">支付方式：</view>
				<view class="info2">
					<picker @change="bindPickerChange2" :value="index2" :range="array2" range-key="title">
						<view class="uniEnd">
							<view class="pcs" v-if="!arrayId2">请选择</view>
							<view v-else>{{arrayName2}}</view>
							<img src="../../static/bg/icons.png" alt="">
						</view>
					</picker>
				</view>
			</view> -->
			<view class="navs uniBtn2">
				<view class="name">备注：</view>
				<view class="info2">
					<view class="uniFlex2">
						<textarea style="height: 200upx;" v-model="remark" maxlength="-1" placeholder="请输入备注"
							placeholder-class="pcs2"></textarea>
					</view>
				</view>
			</view>
		</view>

		<view class="dt">
			<view class="navs uniBtn" v-if="active==140">
				<view class="name">门诊余额：</view>
				<view>{{list.cmoney}}￥</view>
			</view>
			<view class="navs uniBtn">
				<view class="name">订单费：</view>
				<view style="color:#F86C53;">{{list.order.price}}￥</view>
			</view>
			<view class="navs uniBtn">
				<view class="name">配送费：</view>
				<view style="color:#F86C53;">{{list.kdjg}}￥</view>
			</view>
		</view>

		<view class="btnStyle" @click="submit">立即支付</view>
		<view style="height: 35upx;"></view>
	</view>
</template>

<script>
	// #ifdef H5
	var jweixin = require('jweixin-module')
	// #endif
	import {
		getzhifu,
		kdjg,
		pay
	} from '@/request/api.js';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import commonUtil from "../../components/utils/format.js";
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				
				
				id: '',
				active: '',//门诊140，医生136
				list: {
					cmoney:'',
					kdjg:'',
					order:{
						price: ''
					},
					company:{
						username: "",
						tel: "",
						province_id: "",
						province_name: "",
						city_id: "",
						city_name: "",
						area_id: "",
						area_name: "",
						address: ""
					}
				},
				remark: '',
				price: '',
				kdjg:'',
			}
		},
		onLoad(options) {
			this.id = options.oid
			this.active = options.active
			getzhifu({
				id: options.oid
			}).then(res => {
				this.list = res.data
			})
		},

		methods: {
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e)
				// console.log(JSON.parse(this.pickerText).label)
				this.pickerText = JSON.stringify(e.label).replace(/\"/g, '');
				this.list.company.province_name = String(this.pickerText).split('-')[0]
				this.list.company.city_name = String(this.pickerText).split('-')[1]
				this.list.company.area_name = String(this.pickerText).split('-')[2]
				let dataId = JSON.stringify(e.cityCode).replace(/\"/g, '')
				this.province_id = dataId.substring(0, 2) + '0000'
				this.city_id = dataId.substring(0, 4) + '00'
				this.area_id = dataId
				// console.log(this.province_id, this.list.company.province_name, '省')
				// console.log(this.city_id, this.list.company.city_name, '市')
				// console.log(this.area_id, this.list.company.area_name, '区')
				kdjg({
					oid: this.id,
					type: 39,
					id: this.province_id
				}).then(res => {
					this.list.kdjg = res.data.price
				})
			},
			
			submit() {
				if (!this.list.company.username) {
					uni.showToast({
						title: '请填写姓名',
						icon: "none"
					})
					return
				}
				if (!this.list.company.tel) {
					uni.showToast({
						title: '请填写电话',
						icon: "none"
					})
					return
				}
				if (!this.list.company.province_id) {
					uni.showToast({
						title: '请选择地址',
						icon: "none"
					})
					return
				}
				if (!this.list.company.address) {
					uni.showToast({
						title: '请填写详细地址',
						icon: "none"
					})
					return
				}
				let param = {
					id: this.id,
					pay_type: this.active,
					kdjg:this.list.kdjg,
					remark:this.remark,
					openid: uni.getStorageSync('openid'),
					kuaidi_name:this.list.company.username,
					kuaidi_phone:this.list.company.tel,
					province_id:this.list.company.province_id,
					city_id:this.list.company.city_id,
					area_id:this.list.company.area_id,
					address:this.list.company.address
				}
				uni.showLoading({
					mask:true
				})
				pay(param).then(res => {
					uni.hideLoading()
					if(this.active == 140){//门诊支付
						uni.showToast({
							title: "付款成功！",
							duration: 1000
						})
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 800)
					}else{//医生支付
						uni.showLoading({
							title: '支付中......',
							icon:'none',
							mask:true
						});
						if (res.data.paySign != '') {
							jweixin.config({
								// debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								appId: res.data.appId, // 必填，公众号的唯一标识
								timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
								nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
								signature: res.data.paySign, // 必填，签名
								jsApiList: [ //这里是需要用到的接口名称  
									'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
									'chooseWXPay', //微信支付  
								], // 必填，需要使用的JS接口列表
								openId:uni.getStorageSync('openid')
							});
							//付款
							jweixin.chooseWXPay({
								appId:res.data.appId,
								timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
								nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32
								package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
								signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
								paySign: res.data.paySign, // 支付签名
								success: function(ret) {
									//跳转到支付成功页面有这个页面
									// routes.push({
									// 	path: 'download'
									// });
									uni.hideLoading();
									uni.showToast({
										title: "付款成功！",
										duration: 1000
									})
									setTimeout(function() {
										uni.reLaunch({
											url: '/pages/index/index'
										})
									}, 800)
								},
								cancel: function(res) {
									uni.hideLoading();
									uni.showToast({
										title: "付款失败！",
										icon:'none',
										duration: 1000
									})
								},
								fail: function(res) {
									uni.hideLoading();
									uni.showToast({
										title: "付款失败！",
										icon:'none',
										duration: 1000
									})
								}
							});
						} else {
							uni.hideLoading();
							uni.showToast({
								title: "获取用户签名信息失败",
								duration: 1000
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}

	.dt {
		background: #ffffff;
		padding: 20upx 30upx;
		font-size: 30upx;
		margin-bottom: 30upx;

		.title {
			font-size: 32upx;
			font-weight: bold;
		}
		
		.inputWrap {
		
			.input {
				height: 96upx;
				border-bottom: 1px solid #E5E5E5;
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.inputLeft {
					display: flex;
					align-items: center;
		
					.title {
						width: 140upx;
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 40px;
						color: #414141;
						margin-right: 40upx;
					}
		
					.pickerInput {
						font-size: 28upx;
						line-height: 96upx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						width:500upx;
					}
				}
			}
		
			.input:last-of-type {
				border: none;
			}
			
			.uniFlex2{
				.title {
					line-height: 40px;
					width: 140upx;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #414141;
					margin-right: 40upx;
				}
				
				textarea {
					flex: 1;
					padding: 20upx 0;
				}
				
			}
		}

		.navs {
			margin: 20upx 0;

			.name {
				width: 165upx;
				flex-shrink: 0;
				white-space: nowrap;
				color: #414141;
			}

			.icon {
				width: 45upx;
				height: 45upx;
				margin-left: 15upx;
			}

			.info2 {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				text-align: right;

				input,
				picker,
				textarea {
					width: 460upx;
				}

				img {
					width: 45upx;
					height: 45upx;
					margin-left: 15upx;
				}

				.input2 {
					width: 80upx;
					border-bottom: 1px solid #CCCCCC;
					text-align: center;
				}

				.fast {
					margin-left: 30upx;
					background: #F86C53;
					border-radius: 45upx;
					padding: 10upx 35upx;
					font-size: 28upx;
					color: #ffffff;
				}
			}
		}

		.navsAdd {
			text-align: center;
			border: 1px dashed #F86C53;
			border-radius: 40upx;
			padding: 15upx 45upx;
			color: #F86C53;
			background: #FFF2F7;
			width: 260upx;
			margin: 45upx auto;
		}
	}
</style>
